<template>
  <div class="layout">
      <i-col span="4" class="layout-menu-left">
        <Menu :openNames="['导航一']" active-name="导航一>选项一" theme="dark" width="auto" @on-select="selectMenu">
          <div class="layout-logo-left">
          </div>
          <Submenu v-for="item in menuData" :key="item.key" :name="item.name">
            <template slot="title">
              <Icon :type="item.logo"></Icon>
                {{item.name}}
            </template>
            <Menu-item v-for="childrenItem in item.children" :key="childrenItem.key" :name="childrenItem.name" :to="childrenItem.router">
              {{childrenItem.name.split('>')[1]}}
            </Menu-item>
          </Submenu>
        </Menu>
        <!--<Menu active-name="1-1" theme="dark" width="auto" :openNames="['1']" @on-select="selectMenu">-->
          <!--<div class="layout-logo-left"></div>-->
          <!--<Submenu name="1" key="1">-->
            <!--<template slot="title">-->
              <!--<Icon type="ios-navigate"></Icon>-->
              <!--导航一-->
            <!--</template>-->
            <!--<Menu-item name="1-1" key="1-1" to="/config">选项 1</Menu-item>-->
            <!--<Menu-item name="1-2" key="1-2">选项 2</Menu-item>-->
            <!--<Menu-item name="1-3" key="1-3">选项 3</Menu-item>-->
          <!--</Submenu>-->
          <!--<Submenu name="2" key="2">-->
            <!--<template slot="title">-->
              <!--<Icon type="ios-keypad"></Icon>-->
              <!--导航二-->
            <!--</template>-->
            <!--<Menu-item name="2-1" key="2-1">选项 1</Menu-item>-->
            <!--<Menu-item name="2-2" key="2-2">选项 2</Menu-item>-->
          <!--</Submenu>-->
          <!--<Submenu name="3" key="3">-->
            <!--<template slot="title">-->
              <!--<Icon type="ios-analytics"></Icon>-->
              <!--导航三-->
            <!--</template>-->
            <!--<Menu-item name="3-1" key="3-1">选项 1</Menu-item>-->
            <!--<Menu-item name="3-2" key="3-2">选项 2</Menu-item>-->
          <!--</Submenu>-->
        <!--</Menu>-->
      </i-col>
      <i-col span="20" style="height: 100%">
        <div class="layout-breadcrumb">
          <Breadcrumb>
            <Breadcrumb-item href="#">首页</Breadcrumb-item>
            <Breadcrumb-item href="#">{{activeMenu[0]}}</Breadcrumb-item>
            <Breadcrumb-item>{{activeMenu[1]}}</Breadcrumb-item>
          </Breadcrumb>
        </div>
        <div class="layout-content">
          <div class="layout-content-main">
            <router-view/>
          </div>
        </div>
        <div class="layout-copy">
          2011-2016 &copy; TalkingData
        </div>
      </i-col>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      theme1: 'light',
      activeMenu: ['导航一', '选项一'],
      menuData: [
        {
          key: '1',
          name: '导航一',
          logo: 'ios-navigate',
          children: [
            {
              key: '1-1',
              name: '导航一>选项一',
              router: '/config'
            },
            {
              key: '1-2',
              name: '导航一>选项二',
              router: '/echarts'
            }
          ]
        },
        {
          key: '2',
          name: '导航二',
          logo: 'ios-keypad',
          children: [
            {
              key: '2-1',
              name: '导航二>选项一',
              router: '/e1'
            },
            {
              key: '2-2',
              name: '导航二>选项二',
              router: '/'
            },
            {
              key: '2-3',
              name: '导航二>选项三',
              router: '/'
            }
          ]
        },
        {
          key: '3',
          name: '导航三',
          logo: 'ios-analytics',
          children: [
            {
              key: '3-1',
              name: '导航三>选项一',
              router: '/'
            },
            {
              key: '3-2',
              name: '导航三>选项二',
              router: '/'
            },
            {
              key: '3-3',
              name: '导航三>选项三',
              router: '/'
            }
          ]
        }
      ]
    }
  },
  methods: {
    selectMenu (name) {
      this.activeMenu = name.split('>')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .layout{
    height: 100%;
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
  }
  .layout-breadcrumb{
    padding: 10px 15px 0;
  }
  .layout-content{
    min-height: 200px;
    height: 82%;
    margin: 15px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }
  .layout-content-main{
    padding: 10px;
  }
  .layout-copy{
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }
  .layout-menu-left{
    height: 100%;
    background: #464c5b;
  }
  .layout-header{
    line-height: 60px;
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    border-radius: 3px;
    margin: 15px auto;
    background-image: url('../assets/logo.png');
    background-size: 100% 100%;
  }
</style>
